<template>
  <div class="selfInfo">
    <van-nav-bar
      title="个人信息"
      left-text="返回"
      left-arrow
      @click-left="goBack"
    />
    <van-cell is-link @click="showPopupThree" class="head">
      <template #title>
        <span class="custom-title">头像</span>
      </template>
      <template #right-icon>
        <!-- <van-image src="https://img.yzcdn.cn/vant/cat.jpeg" /> -->
        <img class="headImg" :src="userInfo.avatar" alt />
      </template>
    </van-cell>
    <van-cell title="昵称" :value="userInfo.nickname" is-link />
    <van-cell title="手机号" :value="userInfo.mobile" is-link />
    <van-cell @click="goList(userInfo.sex)" v-if="userInfo.sex == 0" title="性别" is-link value="男" />
    <van-cell @click="goList(userInfo.sex)" v-if="userInfo.sex == 1" title="性别" is-link value="女" />
    <van-cell @click="goList(userInfo.sex)" v-if="userInfo.sex == 3" title="性别" is-link value="未知" />
    <van-cell
      title="出生日期"
      @click="showPopup"
      :value="times | dateFormat"
      is-link
    />
    <van-cell title="选择城市" @click="showPopupTow" :value="arr" is-link />
    <van-cell title="选择科目" @click="goClass(userInfo.user_attr)" value='1312' is-link />
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="OkButton"
      />
    </van-popup>
    <van-popup
      v-model="showTow"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-area
        title="标题"
        :area-list="AreaList"
        :columns-placeholder="['请选择', '请选择', '请选择']"
        @change="One"
        @confirm="OkNow()"
      />
    </van-popup>
    <van-popup
      v-model="showThree"
      round
      position="bottom"
      :style="{ height: '30%' }"
    >

    <van-uploader :after-read="afterRead" />
    </van-popup>
  </div>
</template>

<script>
import { Loading } from 'vant';
import { lglTimeOne } from "../../util/http";
import { lglSheng } from "../../util/http";
import { lglShi } from "../../util/http";
import { lglQu } from "../../util/http";
import { lglDiZhiXiuGai } from "../../util/http";
import { lglupimg } from "../../util/http";
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: {},
  data() {
    return {
      showThree:false,
      userInfo: {},
      minDate: new Date(1940, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      show: false, //弹出层
      showTow: false, //地址弹出层
      times: "zxc",
      //渲染的地址
      AreaList: {
        province_list: {},
        city_list: {},
        county_list: {},
      },
      diID: {
        city_id: "", //市id
        district_id: "", //区id
        province_id: "", //省id
      },
      diName: {
        sheng: "",
        shi: "",
        qu: "",
      },
      arr: "",
    };
  },
  filters: {
    birthday() {
      return this.currentDate.toLocaleString();
    },
  },
  computed: {},
  watch: {},
  methods: {
    //进入页面的时候请求省市区拿到数据渲染
    async add() {
      let arr = [];
      await lglSheng().then((res) => {
        let a = res.filter((item) => {
          return item.id == this.userInfo.province_id;
        });
        arr.push(a[0].area_name);
      });

      let data = {
        id: this.userInfo.province_id,
      };
      await lglShi(data).then((res) => {
        let b= res.filter((item) => {
          return item.id == this.userInfo.city_id;
        });
        arr.push(b[0].area_name);
      });
      let id = this.userInfo.city_id;
      await lglQu(id).then((res) => {
          let c= res.filter((item) => {
          return item.id == this.userInfo.district_id;
        });
        arr.push(c[0].area_name);
        let arr2 = arr.join(",");
        this.arr= arr2;
      });
    },

    goBack() {
      this.$router.push("/person");
    },

    getUserInfo() {
      this.userInfo = JSON.parse(window.sessionStorage.getItem("user"));
    },
    //图片
     afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file.file);
      let data = new FormData();
      data.append('file',file.file);
      
       lglupimg(data).then(res=>{
      //lglupimg是封装的请求方法，这里自己改一下就可以，没封装可以用this.$axios
        console.log(res)
        //res返回上传的图片的路径等信息
        
        //调用更新用户资料接口更改用户信息
        lglDiZhiXiuGai({avatar:res.path}).then(res=>{
          console.log(res)
          let userInfo = JSON.parse(window.sessionStorage.getItem("user"));
          userInfo.avatar = res.avatar;
          window.sessionStorage.setItem("user",JSON.stringify(userInfo));
          this.showThree=false;
          this.getUserInfo();

        })
      })

    },

    //点击事件
    showPopup() {
      this.show = true;
    },
    showPopupThree() {
      this.showThree = true;
    },
    //点击省级列表开始渲染
    async showPopupTow() {
      await lglSheng().then((res) => {
        let obj = {};
        res.forEach((i) => {
          obj[i.id] = i.area_name;
        });
        this.AreaList.province_list = obj;
        console.log(this.AreaList.province_list)
      });
      this.showTow = true;
    },
    //选择省 之后 请求市
    async One(Picker, a, b) {
      let id = a[0].code; //id
      let name = a[0].name; //name
      this.diID.province_id = id;
      this.diName.sheng = name;
      // //市
      let data = { id: id };
      await lglShi(data).then((res) => {
        let obj = {};
        res.forEach((i) => {
          obj[i.id] = i.area_name;
        });
        this.AreaList.city_list = obj;
        if (a[1]) {
          let idS = a[1].code; //市
          let Sname = a[1].name; //市

          this.diID.city_id = idS;
          (this.diName.shi = Sname),
            lglQu(idS).then((ress) => {
              ress.forEach((i) => {
                obj[i.id] = i.area_name;
              });
              this.AreaList.county_list = obj;
            });
        }
        if (a[2]) {
          let idQ = a[2].code;
          let idN = a[2].name;
          this.diID.district_id = idQ;
          this.diName.qu = idN;
        }
      });
    },
    //点击确认按钮
    OkButton(e) {
      this.times = e;
      this.show = false;
    },
    //地区按钮
    async OkNow() {
      if (
        this.diID.city_id == "" ||
        this.diID.district_id == "" ||
        this.diID.province_id == ""
      ) {
        console.log("空");
        return false;
      }
      await lglDiZhiXiuGai(this.diID).then((res) => {
        if (res.id) {
          this.$toast.success({
            message: "修改成功",
          });
          this.showTow = false;
          let arr = `${this.diName.sheng},${this.diName.shi},${this.diName.qu}`;
          this.arr = arr;
          let userInfo = JSON.parse(window.sessionStorage.getItem("user"));
          userInfo.province_id = this.diID.province_id;
          userInfo.city_id = this.diID.city_id;
          userInfo.district_id = this.diID.district_id;
          window.sessionStorage.setItem("user",JSON.stringify(userInfo))
          this.getUserInfo();
        }
      });
    },
    //性别
    goList(sex){
      console.log(sex)
      this.$router.push({path:'/QiuGaiSex',query:sex}); //路由传参
    },
    //科目
    goClass(arr){
      this.$router.push({path:'/xiuGais',query:arr})
    },
  },
  beforeCreate() {},
  created() {
    this.getUserInfo();
  },
  beforeMount() {},
  mounted() {
    this.add();
  },
};
</script> 
<style scoped>
.selfInfo {
  background: #f0f2f5;
  min-height: 100%;
}
.head .van-cell__title {
  margin-top: 12px;
}
.headImg {
  width: 50px;
  height: 50px;
  border-radius: 50% !important;
}
</style>
